{% extends 'base.html' %}
{% block title %}
    <title>笔记列表</title>
    <style>
        .item_a {
            text-decoration: none;
        }

        .note_item {
            border: 1px solid hsla(0, 0%, 88%, .6);
            border-radius: 4px;
            padding: 20px;
            margin-bottom: 10px;

        }

        .note_item:hover {
            box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
        }
    </style>
{% endblock %}
{% load static %}
{% block content %}
    <div class="container" style="padding: 60px 0;">
        <div class="row">
            <div class="col-md-9">
                <div class="jumbotron">
                    <h1>{{ banner.title }}</h1>
                    <p>{{ banner.dec}}</p>
                </div>
                {% if is_exits %}
                    {% for note in c_page %}
                    <a class="item_a" href="{% url 'note_detail' note.id %}" style="text-decoration: none;color: black">
                        <div class="note_item">
                            <div class="media">
                                <div class="media-left media-middle">
                                    <img alt="book图片" src="{{ imgs|random }}" class="media-object" style="width:150px">
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading"><strong>{{ note.title }}</strong></h4>
                                    <object>{{ note.content|safe|truncatechars_html:150}}...</object>
                                </div>
                            </div>
                            <div class="info pull-right" style="color:#444;">
                                <span class="glyphicon glyphicon-user"></span> {{ note.user }}&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-time"></span> {{ note.pub_date }}&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-eye-open"></span> {{ note.read_num }}&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-thumbs-up"></span> {{ note.like_num }}&nbsp;&nbsp;
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                {% else %}
                    <h2>没有搜索到相关的内容！</h2>
                {% endif %}
            {% if is_exits %}
                <div class="text-center">
                    <ul class="pagination">
                        {% if c_page.has_previous %}
                            {% if kw %}
                                 <li><a href="{% url 'note_list' %}?tag={{ tag }}&pid={{ c_page.previous_page_number }}&kw={{ kw }}">&laquo;</a></li>
                            {% else %}
                                 <li><a href="{% url 'note_list' %}?tag={{ tag }}&pid={{ c_page.previous_page_number }}">&laquo;</a></li>
                            {% endif %}

                        {% else %}
                            <li class="disabled"><a href="#">&laquo;</a></li>
                        {% endif %}
                        {% for pid in paginator.page_range %}
                            {% if pid == c_page.number %}
                                {% if kw %}
                                    <li class="active"><a href="{% url 'note_list' %}?tag={{ tag }}&pid={{ pid }}&kw={{ kw }}">{{ pid }}</a></li>
                                {% else %}
                                    <li class="active"><a href="{% url 'note_list' %}?tag={{ tag }}&pid={{ pid }}">{{ pid }}</a></li>
                                {% endif %}
                            {% else %}
                                {% if kw %}
                                    <li class=""><a href="{% url 'note_list' %}?tag={{ tag }}&pid={{ pid }}&kw={{ kw }}">{{ pid }}</a></li>
                                {% else %}
                                    <li class=""><a href="{% url 'note_list' %}?tag={{ tag }}&pid={{ pid }}">{{ pid }}</a></li>
                                {% endif %}

                            {% endif %}
                        {% endfor %}
                        {% if c_page.has_next %}
                            {% if kw %}
                               <li><a href="{% url 'note_list' %}?tag={{ tag }}&pid={{ c_page.next_page_number }}&kw={{ kw }}">&raquo;</a></li>
                            {% else %}
                                <li><a href="{% url 'note_list' %}?tag={{ tag }}&pid={{ c_page.next_page_number }}">&raquo;</a></li>
                            {% endif %}
                        {% else %}
                            <li class="disabled"><a href="#">&raquo;</a></li>
                        {% endif %}

                    </ul>
                </div>
            {% endif %}
            </div>
            <div class="col-md-3 hidden-sm hidden-xs">
                <div style="margin-bottom: 15px">
                    <form class="bsform" role="form" action="{% url 'note_list' %}" method="post">
                        {% csrf_token %}
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="按标题关键字搜索" name="kw">
                            {# 这两个隐藏的input负责把 tag 和 pid 这两个参数通过post 传到后台 #}
                            <input type="hidden" value="{{ tag }}" name="tag">
                            <input type="hidden" value="{{ pid }}" name="pid">
                            <span class="input-group-btn">
                                <input class="btn btn-default" type="submit" value="Go!">
                            </span>
                        </div>
                    </form>
                </div>
                <div style="margin-bottom: 15px">
                   <a href="#" class="list-group-item active " style="text-align: center">
                        所有分类
                    </a>
                    {% for all_type in all_types %}
                         <a href="{% url 'note_list' %}?tag={{ all_type.name }}" class="list-group-item">{{ all_type.name }}
                            <p class="pull-right" style="font-size: 8px">
                            <span>文章数：</span><span>{{ all_type.note_set.all|length }}</span>
                            </p>
                         </a>
                    {% endfor %}
                </div>
                <div>
                    <a href="#" class="list-group-item active " style="text-align: center">
                        热门文章
                    </a>
                    {% for hnote in hot_note %}
                        <a href="{% url 'note_detail' hnote.id%}" class="list-group-item">
                        {% if hnote.title|length > 10 %}
                            Top{{ forloop.counter }}  <strong>{{ hnote.title | truncatechars:10}}...</strong>
                        {% else %}
                            Top{{ forloop.counter }}  <strong>{{ hnote.title }}</strong>
                        {% endif %}
                        <p class="pull-right" style="font-size: 8px">
                            <span>阅读数：</span><span>{{ hnote.read_num }}</span>
                            </p>
                        </a>
                    {% endfor %}



                </div>
            </div>
        </div>
    </div>
    <script>
        {# 导航标签随点击高亮#}
        {#页面加载完毕后执行函数#}
        window.onload = function (){
            let tag = '{{ tag }}'
            let lis = document.querySelectorAll('#navbar>ul>li')
            {# 先通过遍历去除所有标签的active类名 #}
            for (let i = 0; i < lis.length; i++) {
                lis[i].className = ''
            }

            if (tag === 'all'){
                lis[1].className = 'active'
            }else if (tag === 'django'){
                lis[2].className = 'active'
            }
            else if (tag === 'python'){
                lis[3].className = 'active'
            }else {
                lis[4].className = 'active'
            }
        }
    </script>
{% endblock %}